<div id="image-list" style="position: relative; height: 13651.1px; width: 1606px;">
    #for(x : paginate.list)
    <div class="box" style="width: 246px;  position: absolute; left: 0%; top: 0px;" data-id="#(x.id)"
         data-url="#(x.url)" data-download="#(x.download)">
        <a href="/detail/#(x.id)" target="_blank" image-id="#(x.id)">
            <img src="#(x.url)"
                 style="display: block;border: none;padding: 0px;margin: 0px;width: 246px;" class="lazyload"
                 width="246"
                 data-original="#(x.url)">
        </a>

        <a class="box-collection-icon animated" image-id="#(x.id)" data-like="#(x.like)"
        >
            <img class="collection-icon" src="/assets/public/images/canvas/collection.png"
                 onclick="IMAGE_OPERATE.like(this)"
            >
            <img class="collection-icon-active"
                 src="/assets/public/images/canvas/collection__active.png">
        </a>

        <a class="box-download-icon animated" href="#" data-download="#(x.download)" onclick="IMAGE_OPERATE.download(this)">
            <img src="/assets/public/images/canvas/download.png">
        </a>
    </div>
    #end
</div>
<script>
    // 下载和点赞
    const IMAGE_OPERATE = {
        like: function (dom) {
            let date = $(dom).parent().parent().data();
            $.get("/image/like/" + date.id, function (res) {
                // $('.collection-icon').hide()
                // $('.collection-icon-active').show()
                console.log({res});
            });
        },
        download: function (dom) {
            let date = $(dom).parent().data();
            $.get("/image/download/" + date.id, function (res) {
                console.log({res});
            });
            window.open(date.url + "?attname=xy.png")
        }
    }

</script>

